<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js文件-->
    <script src="js/vue-v2.6.14.js"></script>
</head>
<body>

    <!--创建一个组件，vue来管理此组件-->
    <div id="app">
        <!--插值表达式-->
        {{message}}
        {{username}}

        {{message + i +100}}
        {{arr[0]}}
        {{arr[1]}}
        {{arr[2]}}

        {{people.sex}}
        {{people.age}}
        {{people.name}}

        {{sayHello()}}
        {{methodB()}}
    </div>

</body>
<script type="text/javascript">
    //el: 表示一个元素  #app 表示  id=app
    new Vue({
        el: "#app", //指定了该vue管理的区域
        //定义模型
        data: {
            message: "HelloWorld",
            username: "zhangsan",
            i : 100,
            arr: [
                'mybatis', 'spring', 'springmvc'
            ],
            people:{
                name: "张三",
                age: 18,
                sex: '男'
            }
        },
        //可以定义方法
        methods :{
            methodA:function(){

            },
            methodB(){
                console.log("methodB");
            },
            sayHello(){
                return "say Hello!";
            }

        }
    });
</script>
</html>